<template>
  <div class="newschedule-container">
    <Dialogdrawerdefect
      :ddtvisible.sync="tempVisible"
      :modal-append-to-body="false"
      :title="tempTitle"
      size="860px"
      :modal="true"
      :has-modal="true"
    >
      <div class="nsc-wrap">
        <div class="nsc-h">
          <el-form
            ref="formdata"
            :inline="true"
            :model="formdata"
            class="ky-form-inline ky-form-inline-sm">
            <el-form-item label="时间">
              <el-input v-model="mmm" style="position: fixed; left: 1000000px;top:0;height: 1px;opacity: 0;"></el-input>
              <el-time-select
                placeholder="起始时间"
                v-model="formdata.beginTime"
                :picker-options="startTimePickerOption">
              </el-time-select>
              <el-time-select
                placeholder="结束时间"
                v-model="formdata.endTime"
                :picker-options="endTimePickerOption">
              </el-time-select>
            </el-form-item>
            <el-form-item label="号源数">
              <el-input v-model="formdata.checkNum" placeholder="请输入" maxlength="4" style="width: 80px;"></el-input>
            </el-form-item>
            <el-form-item label="预留">
              <div slot="label">预留
                <el-tooltip class="item" effect="dark" content="预留号只允许前台登记用，临床预约或移动预约等不能使用会过滤掉！" placement="top-end">
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </div>
              <el-input v-model="formdata.reserveNum" placeholder="请输入" maxlength="4" style="width: 80px;"></el-input>
            </el-form-item>
            <el-form-item label="颜色:">
              <public-input-color-picker
                :value="formdata.color"
                :show-input="false"
                placeholder="请选择颜色"
                @change="(val)=>{formdata.color=val}"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="ky-divider"><el-divider></el-divider></div>
        <div class="nsc-m">
          <!-- <div class="nsc-m-tit">参数设置</div> -->
          <el-row :gutter="15">
            <el-col :span="6">
              <templateList ref="templateList" @checkedTemplate="checkedTemplate"></templateList>
            </el-col>
            <el-col :span="18">
              <ruleTemplate ref="ruleTemplate" :is-temp="true" :hospital-code="hospitalCode" :dep="dep"></ruleTemplate>
            </el-col>
          </el-row>
        </div>
        <div class="nsc-footer">
          <el-button size="small" @click="close">返回</el-button>
          <el-button size="small" type="primary" @click="save">保存</el-button>
        </div>
      </div>
    </Dialogdrawerdefect>
  </div>
</template>

<script>
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawerDefect'
import publicInputColorPicker from '@/components/color-picker/index'
import ruleTemplate from './ruleTemplate'
import templateList from './templateList'
const _formdata = {
  id: 0,
  beginTime: '',
  endTime: '',
  addNum: '0', // 追加
  reserveNum: '0', // 预览号码
  recordCode: '', // 参数模板名称
  checkNum: '', // 检查数量
  color: '', // 颜色
  appointmentFilters: [], // 过来规则
  check: []
}
export default {
  props: {
    tempTitle: {
      type: String,
      default: '新增参数模板'
    }
  },
  components: {
    Dialogdrawerdefect,
    ruleTemplate,
    templateList,
    publicInputColorPicker
  },
  data() {
    return {
      tempVisible: false,
      stfIsAdd: true, // false 编辑，默认 true 新增
      mmm: '', // 所在输入框，解决模态框打开是获取焦点的bug
      stfStatus: 'schedule', // 判断弹框模板使用的对象，schedule 排班管理，template 模板管理
      // 设置时间选项参数
      stepTime: '00:30',
      startTime: '00:00',
      endTime: '24:00',
      formdata: {
        id: 0,
        beginTime: '08:30',
        endTime: '09:00',
        addNum: '0', // 追加
        reserveNum: '', // 预览号码
        recordCode: '', // 参数模板名称
        checkNum: '', // 检查数量
        color: '', // 颜色
        appointmentFilters: [], // 过来规则
        check: []
      },
      // 条件
      hospitalCode: '',
      dep: '',
      // 模板
      tempData: [],
      tempObj: null
    }
  },
  computed: {
    startTimePickerOption() {
      return {
        start: this.startTime,
        step: this.stepTime,
        end: this.endTime,
        maxTime: this.formdata.endTime
      }
    },
    endTimePickerOption() {
      return {
        start: this.startTime,
        step: this.stepTime,
        end: this.endTime,
        minTime: this.formdata.beginTime
      }
    }
  },
  created() {

  },
  methods: {
    // 初始化
    init(data) {
      // tempInfo : null 为新增
      const { time, tempInfo, room, step, brush } = data
      console.log(time, tempInfo, room, step, brush)
      if (tempInfo) {
        this.stfIsAdd = false
      } else {
        this.stfIsAdd = true
      }
      // 重置数据
      this.tempObj = null
      this.stepTime = step ? `00:${step}` : '00:30'
      this.startTime = time ? time.split('-')[0] : '00:00'
      this.endTime = time ? time.split('-')[1] : '24:00'
      this.formdata = tempInfo ? Object.assign({ ..._formdata }, tempInfo) : Object.assign({}, _formdata)
      this.formdata.beginTime = this.formdata.beginTime ? this.formdata.beginTime : '08:30'
      this.formdata.endTime = this.formdata.endTime ? this.formdata.endTime : '09:00'
      this.hospitalCode = room.length > 0 ? room[0] : ''
      this.dep = room.length > 0 ? room[2] : ''
      this.tempVisible = true
      this.$nextTick(() => {
        this.$refs.templateList && this.$refs.templateList.init(room, brush)
        this.$refs.ruleTemplate && this.$refs.ruleTemplate.init(this.formdata)
      })
    },

    // 保存
    async save() {
      if (this.validForm()) {
        let ruleParams = await this.$refs.ruleTemplate.getRuleData()
        ruleParams = JSON.parse(ruleParams)
        console.log(ruleParams)
        console.log(this.formdata)
        if (!ruleParams.recordCode) {
          this.$message.warning('请输入参数模板名称！')
          return false
        }
        this.$confirm(`${this.tempTitle}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          if (this.stfIsAdd) {
            const _obj = {
              'recordCode': ruleParams.recordCode, // 参数模板名称
              'beginTime': this.formdata.beginTime, // 检查开始时间
              'endTime': this.formdata.endTime, // 检查结束时间
              'initialNum': this.formdata.initialNum, // 初始号码
              'checkNum': this.formdata.checkNum, // 检查数量
              'reserveNum': this.formdata.reserveNum, // 预留数量
              'addNum': this.formdata.addNum, // 追加数量
              'color': this.formdata.color, // 颜色
              'appointmentFilters': [...ruleParams.appointmentFilters]
            }
            this.$emit('addScheduleTempSave', _obj)
          } else {
            const _obj = { ...this.formdata }
            _obj.recordCode = ruleParams.recordCode
            _obj.remark1 = ruleParams.recordCode
            _obj.reserveNum = _obj.reserveNum * 1
            _obj.initialNum = _obj.initialNum * 1
            _obj.addNum = _obj.addNum * 1
            _obj.checkNum = _obj.checkNum * 1
            _obj.appointmentFilters = [...ruleParams.appointmentFilters]
            this.$emit('editScheduleTempSave', _obj)
          }
          this.tempVisible = false
        }).catch(() => {})
      }
    },
    // 必填选项验证
    validForm() {
      if (!this.formdata.beginTime) {
        this.$message.warning('请选择开始时间！')
        return false
      } else if (!this.formdata.endTime) {
        this.$message.warning('请选择结束时间！')
        return false
      } else if (!this.formdata.checkNum && this.formdata.checkNum !== 0) {
        this.$message.warning('请输入号源数量！')
        return false
      } else if (!this.formdata.reserveNum && this.formdata.reserveNum !== 0) {
        this.$message.warning('请输入预留数量！')
        return false
      }
      return true
    },

    // 模板选择
    checkedTemplate(temObj) {
      this.tempObj = temObj
      // console.log('checkedTemplate:====', this.tempObj)
      this.$refs.ruleTemplate && this.$refs.ruleTemplate.init(this.tempObj)
    },

    // 退出
    close() {
      this.tempVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.nsc-wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  // min-width: 600px;
  padding: 0 20px;
  /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 120px;
  }
  /deep/ .el-form-item__label{
    font-weight: 500;
  }
  .nsc-m{
    padding:4px 0 54px;
    flex: 1;
    position: relative;
    .nsc-m-tit{
      font-size: 14px;
      padding: 4px 0;
    }
  }
  .nsc-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    text-align: right;
    padding: 10px 20px;
    border-top: solid 1px #DCDFE6;
    background-color: #fff;
  }
}
.temp-main{
  display: flex;
  flex-direction: column;
  .temp-tit{
    line-height: 40px;
  }
  .temp-list{
    flex: 1;
    display: flex;
    flex-direction: column;
    border: solid 1px #DCDFE6;
    padding: 4px;
    min-height: calc(100vh - 300px);
    .temp-item{
      min-width: 220px;
      padding: 10px;
      border: solid 1px #DBDFE9;
      border-radius: 3px;
      margin-bottom: 6px;
      font-size: 12px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      &:hover{
        box-shadow: 0 3px 5px rgba(116, 116, 116, 0.16);
      }
      .txt{
        margin:0 10px;
      }
      .fc-blue{
        color: #0091FF;
      }
    }
    .temp-item-active{
      border-color:#0091FF
    }
  }
}
.form-grid{
  padding-bottom:10px;
  border-bottom: solid 1px #DBDFE9;
  &:last-child{
    border-bottom: none;
  }
  .fg-tit{
    display: flex;
    line-height: 44px;
    .txt{
      flex: 1;
    }
    .flr-add{
      user-select: none;
      color: #0091FF;
      cursor: pointer;
    }
  }
}
.flr-main{
  /deep/ .el-table td,/deep/ .el-table th{
    padding: 4px 0;
  }
  .flr-del{
    display: none;
    font-size: 18px;
    line-height: 28px;
    color: #fc4242;
    cursor: pointer;
  }
  /deep/ .el-table__row:hover{
    .flr-del{
      display: block;
    }
  }
}

</style>
